import React, { useEffect } from "react";
import { Container, Image } from "react-bootstrap";
import { useLocation } from "react-router-dom";

interface FileDetailProps {
    src?:string
}

const FileDetail:React.FC<FileDetailProps> = (props:FileDetailProps)=> {
    
    const location = useLocation();

    useEffect(()=>{
    },[location])

    const getComponent = ()=> {
        if(location.state && (location.state.mediaType||"").includes("video")){
            return <video controls src={location.state.target||props.src} style={{width:"100%",height:"auto"}}/>;
        }else if(location.state && (location.state.mediaType||"").includes("image")){
            return <Image src={location.state.target||props.src} style={{width:"100%",height:"auto"}}/>
        }else{
            return <iframe src={location.state.target||props.src} style={{
                width:"100vw",
                height:"100vh",
                overflow:"hidden"}}
                />;
        }
    }

    return (<Container fluid style={{width:"100vw",height:"100vh"}}>
       {getComponent()}
        {/* <embed src={location.state.target||props.src} style={{width:"100%",height:"100%"}}/> */}
    </Container>)
}

FileDetail.defaultProps = {
    src:"about/blank"
}

export default FileDetail;